<template>
    <van-tabbar route>
      <van-tabbar-item to="/">
        <template #icon="props">
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/Course">
        <template #icon="props">
          <img :src="props.active ? CourseIcon.active : CourseIcon.inactive" />
        </template>
        <span>课程</span>
      </van-tabbar-item>
      <van-tabbar-item to="/Forward">
        <template #icon="props">
          <img :src="props.active ? ForwardIcon.active : ForwardIcon.inactive" />
        </template>
        <span>约课记录</span>
      </van-tabbar-item>
      <van-tabbar-item to="/Practice">
        <template #icon="props">
          <img :src="props.active ? PracticeIcon.active : PracticeIcon.inactive" />
        </template>
        <span>练习</span>
      </van-tabbar-item>
      <van-tabbar-item to="/My">
        <template #icon="props">
          <img :src="props.active ? MyIcon.active : MyIcon.inactive" />
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
    
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      homeIcon: {
        active:  require("@/assets/theme-img/home-active.png") ,
        inactive:require("@/assets/theme-img/home.png"),
      },
      CourseIcon: {
        active:require("@/assets/icon/书架2.png"),
        inactive: require("@/assets/icon/书架1.png"),
      },
      ForwardIcon: {
        active:require("@/assets/icon/点击2.png"),
        inactive: require("@/assets/icon/点击1.png"),
      },
      PracticeIcon: {
        active:require("@/assets/icon/练习2.png"),
        inactive: require("@/assets/icon/练习1.png"),
      },
      MyIcon: {
        active:require("@/assets/icon/4-4.png"),
        inactive: require("@/assets/icon/4.png"),
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
  .van-hairline--top-bottom{
    height: 100px;
    line-height: 100px;
    img{
      width: 50px;
      height: 50px;
    }
    // font-size: 50px;
  }
</style>